import { getServicesApi } from "@/api/customservice";
import AutoShowDialog from "@/dialog/auto";
import { Link } from "@/i18n/routing";
import { getTranslations } from "next-intl/server";
import Dialogs from "./Dialog";
import Scroll from "./Scroll";
import Service from "./Service";

const terms = [
    { label: "aml", url: "/preventLaunderMoney" },
    { label: "terms", url: "/terms" },
    { label: "kyc", url: "/terms" }, // todo
    { label: "self", url: "/terms" }, // todo
    { label: "underage", url: "/gamingPolicy" },
    { label: "responsible", url: "/gamingPolicy" }, // todo
    { label: "esportes", url: "/terms" }, // todo
];

const Page = async () => {
    const services = await getServicesApi();
    const t = await getTranslations("HomePage");
    return (
        <div className={"px-[0.12rem] py-[0.08rem]"}>
            {/*about*/}
            <div
                className={
                    "grid cursor-pointer grid-cols-3 text-center text-[0.12rem]" + " text-[#fff]"
                }
            >
                <Link href={"/about"} className={"text-[#fff]"}>
                    {t("Sobre")}
                </Link>
                <Link
                    href={"/concat"}
                    className={"border-l-[1px] border-r-[1px] text-[#fff]" + " border-[grey]"}
                >
                    {t("Contante")}
                </Link>
                <Link href={"/help"} className={"text-[#fff]"}>
                    {t("Como")}
                </Link>
            </div>
            <div className={"mx-[0.1736rem]"}>
                {/* service */}
                <div className="mt-[0.26rem] flex flex-col items-center text-[0.12rem]">
                    <Service services={services} />
                </div>

                {/*terms*/}
                <div className={"pb-[0.1rem] text-center text-[0.13rem]"}>
                    {terms.map((item, index) => (
                        <Link
                            href={item.url}
                            key={index}
                            className={"inline-block px-[0.1rem]" + " text-[#ced1ff]"}
                        >
                            {t(item.label)}
                        </Link>
                    ))}
                </div>
                {/*LICENCIA*/}
                <div className={"text-[0.12rem] text-[#ced1ff]"}>
                    <div className={"border-b-1 border-[#4d4d4d] text-center leading-[0.26rem]"}>
                        {t("licencia")}
                    </div>
                    <div className={"my-[0.08rem]"}>
                        {t("desc")}
                        {/*<a href="#" className={"text-[#fff]"}>*/}
                        {/*    {t("desclink")}*/}
                        {/*</a>*/}
                        <div className={"mt-[0.08rem] text-left"}>
                            {t("desc2")}
                            <br />
                            {t("desc3")}
                            <br />
                            {t("desc4")}
                        </div>
                    </div>
                </div>
                <div className={"flex justify-center"}>
                    <div className={"iconfont icon-a-18 text-[0.3958rem] text-[red]"}></div>
                </div>

                {/*support*/}
                <Scroll />
            </div>
            <Dialogs></Dialogs>
            <AutoShowDialog />
        </div>
    );
};

export default Page;